<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import EchartsMixins from '../echarts.mixins'
  import Format from '@/utils/format'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        compensateXAngleList: [],
        // 监测点名称
        monitorName: '',
        seriesLists: [],
        yAxisName: ''
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          title: {
            text: this.monitorName,
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '46',
            right: '40',
            bottom: '50'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              let contentArr = []
              for (let i = 0; i < params.length; i++) {
                let data = params[i]
                contentArr.push(Format(new Date(data.value[0])))
                if (data.seriesName == '流速') {
                  contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + 'm/s')
                } else {
                  contentArr.push(data.marker + data.seriesName + '：' + data.value[1] + 'm')

                }
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            symbol: 'none',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel:true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            max: function (value) {
              if (value.max < 1) {
                return 1;
              }
              return Math.ceil(value.max);//向上取整
            },
            name: this.yAxisName,
            type: 'value'
          },
          series: this.seriesLists
        }
      }
    },
    methods: {
      updateEchart(data, monitorName,  title) {
        this.charts.clear()
        if (title !== '速率') {
          this.yAxisName = '距离值(m)'
          this.compensateXAngleList = data.relativeValue

          this.monitorName = monitorName + '距离曲线图'
            this.seriesLists = [{
              name: '距离',
              type: 'line',

              smooth: true,
              symbol: 'none',
              data: this.compensateXAngleList,
              itemStyle: {
                normal: {
                  color: '#9d2002'
                }
              },
            }]
        } else {
          this.compensateXAngleList = data.speed

          this.yAxisName = '流速(m/s)'
          this.monitorName = monitorName + '流速曲线图',

            this.seriesLists = [{
              name: '流速',
              type: 'line',

              smooth: true,
              symbol: 'none',
              data: this.compensateXAngleList,
              itemStyle: {
                normal: {
                  color: '#9d2002'
                }
              },
            },]
        }

        this.initEcharts()
        this.charts.setOption(this.options)
        this.charts.resize()
      }
      ,
    },
  }
</script>
